<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>ھىسابلىغۇچ</title>
</head>
<body>
<div class="calc-container">
    <div class="calc-body">
        <div class="screen">
            <div class="screen-body">
                <h1 class="screen-num">0</h1>
            </div>
        </div>
        <div class="calc-btn" id="btns">
            <div class="btn-item">
                <div class="btn-body">
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    // 计数器按钮
    let btns = [7, 8, 9, '÷', 4, 5, 6, '×', 1, 2, 3, '-', 0, '.', '清', '+', 'C', '='];
    // 计数器按钮模板
    let temaplate = ``;
    let calc_btns = document.getElementById('btns');
    // 渲染按钮到计数器按钮区域
    for (let i = 0; i < btns.length; i++) {
        temaplate += `
        <div class="btn-item">
            <div class="btn-body">
                <h1>${btns[i]}</h1>
            </div>
        </div>
        `;
    }
    calc_btns.innerHTML = temaplate;
    // 遍历按钮-绑定点击事件
    let btn = document.getElementsByClassName('btn-item');
    // 屏幕
    let screen = document.querySelector('.screen-num');
    for (let b = 0; b < btn.length; b++) {
        btn[b].onclick = function () {
            let text = screen.textContent;
            let num = this.querySelector('.btn-body').innerText;
            if (num === 'C') {
                screen.textContent = '0';
                return;
            }
            if (num === '=') {
                if (text.includes('×')) text = text.replace('×', '*');
                if (text.includes('÷')) text = text.replace('÷', '/');
                let result = eval(text);
                screen.textContent = result;
                return;
            }
            if (num === '清') {
                screen.textContent = text.slice(0, text.length - 1);
                if (screen.textContent.length === 0) screen.textContent = '0';
                return;
            }
            if (text === "0") screen.textContent = "";
            screen.textContent = screen.textContent + num;
        }
    }

</script>
</body>
</html>